<template>
  <el-card shadow="hover" class="stat-card">
    <div class="stat-card-content">
      <div class="stat-icon">
        <svg-icon :icon-class="icon" />
      </div>
      <div class="stat-info">
        <div class="stat-title">{{ title }}</div>
        <div class="stat-value">{{ value }}</div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'StatCard',
  props: {
    title: {
      type: String,
      required: true
    },
    value: {
      type: [Number, String],
      required: true
    },
    icon: {
      type: String,
      default: 'chart'
    }
  }
}
</script>

<style lang="scss" scoped>
.stat-card {
  margin-bottom: 20px;

  .stat-card-content {
    display: flex;
    align-items: center;

    .stat-icon {
      font-size: 40px;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: var(--el-color-primary);
      margin-right: 15px;
    }

    .stat-info {
      flex: 1;

      .stat-title {
        font-size: 14px;
        color: #999;
        margin-bottom: 5px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}
</style>
